<template>
<view class="container">
	<block v-if="isload">
		<view class="topbg" :style="'background:url(' + pre_url + '/static/img/lv-topbg.png) no-repeat;background-size:100%'">
			<view class="topinfo" :style="'background:url(' + pre_url + '/static/img/lv-top.png);background-size:100%'">
				<image :src="userinfo.headimg" background-size="cover" class="headimg"></image>
				<view class="info">
					<view class="nickname">{{userinfo.nickname}}</view>
					<view class="flex">
						<view class="user-level">
							<view class="level-name">{{userinfo.explain}}</view>
						</view>
						<view v-if="userinfo.saas_jihuo == 1">已激活</view>
						<view v-if="userinfo.saas_jihuo == 2">待激活</view>
					</view>
					
				</view>
				<view class="set" @tap="goto" data-url="set"><text class="fa fa-cog"></text></view>
			</view>
			<view class="upbtn" v-if="userinfo.saas_jihuo == 2" :style="'background:url(' + pre_url + '/static/img/lv-upbtn.png) no-repeat;background-size:100%'" @tap="levelActivate" >等级激活</view>
			<view class="upbtn" v-if="userinfo.saas_jihuo == 1" :style="'background:url(' + pre_url + '/static/img/lv-upbtn.png) no-repeat;background-size:100%'" >等级已激活</view>
			
			
			<view class="upbtn" v-if="userinfo.xiaofei_jihuo == 1" :style="'background:url(' + pre_url + '/static/img/lv-upbtn.png) no-repeat;background-size:100%'"  >消费礼包已激活</view>
			<view class="box-style" v-if="userinfo.xiaofei_jihuo == 0">
				<view class="title">消费礼包</view>
				<radio-group class="radio-group" name="score_box" @change="changeBoxScore">
					<label v-for="(item,index) in scorelist" :key="index" class="list">
						<radio class="radio" :value="item.id"/>{{item.title}}
					</label>
				</radio-group>
				<view class="upbtn" v-if="userinfo.xiaofei_jihuo == 0 " :style="'background:url(' + pre_url + '/static/img/lv-upbtn.png) no-repeat;background-size:100%'" @tap="consumeBox" >购买消费礼包</view>
			</view>
			
			
			
		</view>
		<view style="width:100%;height:20rpx;background-color:#f6f6f6"></view>

		<view class="explain">
			<view class="f1"> — 礼包介绍 — </view>
			<view class="f2">
				<parse :content="userinfo.explain" />
			</view>
		</view>
	</block>
	<loading v-if="loading"></loading>
	<dp-tabbar :opt="opt"></dp-tabbar>
	<popmsg ref="popmsg"></popmsg>
</view>
</template>

<script>
var app = getApp();
export default {
  data() {
    return {
			opt:{},
			loading:false,
      isload: false,
			menuindex:-1,
			
			pre_url:app.globalData.pre_url,
      userinfo: [],
      scorelist:[],
      sysset: [],
	  xfbox:0,
    };
  },
  onLoad: function (opt) {
		this.opt = app.getopts(opt);
		if(this.opt.token != undefined){
			this.setlogin();
		}else{
			this.getdata();
		}
		
  },
	onPullDownRefresh: function () {
		this.getdata();
	},
  methods: {
	  setlogin:function(){
	  	var that = this;
	  	app.post("ApiIndex/logintogether", {gtksession:that.opt.token}, function (res) {
	  		that.getdata();
	  	});
	  },
		getdata: function () {
			var that = this;
			that.loading = true;
			app.post('ApiMy/getMemberSaasLevelInfo', {id:that.opt.id}, function (res) {
				that.loading = false;
				if (res.userinfo) {
					that.userinfo = res.userinfo;
					that.scorelist = res.score_list
					that.show = true;
				}
				that.loaded();
			});
		},
		levelActivate:function(){
			var that = this;
			that.loading = true;
			app.post('ApiMy/memberLevelActivate', {}, function (res) {
				that.loading = false;
				if (res.status==0) {
					app.error(res.msg);
				}else{
					 app.success(res.msg);
					 app.goto('/pages/pay/pay?id='+res.payorderid);
				}
				that.loaded();
			});
		},
		consumeBox:function(){
			var that = this;
			that.loading = true;
			if(that.xfbox == 0){
				app.error('请选择消费礼包');
				that.loading = false;
				return false;
			}
			app.post('ApiMy/consumeScoreBox', {box_id:that.xfbox}, function (res) {
				that.loading = false;
				if (res.status==0) {
					app.error(res.msg);
				}else{
					 app.success(res.msg);
					 app.goto('/pages/pay/pay?id='+res.payorderid);
				}
				that.loaded();
			});
		},
		changeBoxScore:function(e){
			console.log(e.detail.value);
			var that = this;
			that.xfbox = e.detail.value;
		}
  }
};
</script>
<style>
page{background:#fff}
.topbg{width:100%;display:flex;flex-direction:column;align-items:center;padding-bottom:30rpx}
.topinfo{margin-top:70rpx;width:670rpx;height:270rpx;padding:60rpx 50rpx;display:flex;justify-content:center;position:relative}
.topinfo .headimg{width:120rpx;height:120rpx;border-radius:50%;}
.topinfo .info{display:flex;flex:auto;flex-direction:column;padding-left:20rpx;height:120rpx;}
.topinfo .info .nickname{font-size:36rpx;font-weight:bold;color:#fff;margin-bottom:10rpx}
.topinfo .info .endtime{color:#fff;font-size:24rpx;margin-top:20rpx}
.topinfo .set{position:absolute;top:30rpx;right:40rpx;width:70rpx;height:70rpx;line-height:70rpx;font-size:50rpx;text-align:center;color:#fff}

.topbg .upbtn{margin-top:10rpx;width:660rpx;height:110rpx;line-height:90rpx;text-align:center;color:#fff;font-size:32rpx;}

.user-level{color:#b48b36;background-color:#ffefd4;margin-top:4rpx;width:auto;height:36rpx;border-radius:18rpx;padding:0 20rpx;display:flex;align-items:center}
.user-level .level-img {width:32rpx;height:32rpx;margin-right:6rpx;margin-left:-14rpx;border-radius:50%}
.user-level .level-name {font-size:24rpx;}

.explain{ width:100%;margin:20rpx 0;}
.explain .f1{width:100%;text-align:center;font-size:30rpx;color:#333;font-weight:bold;height:50rpx;line-height:50rpx}
.explain .f2{padding:20rpx;background-color:#fff}


.box-style{width: 90%;display: flex;flex-direction: column;}
.box-style radio-group{
	display: flex;
	flex-direction: column;
}
.box-style .title{
	font-size: 18px;
	height: 100rpx;
	line-height: 100rpx;
}
.box-style .list{
	height: 70rpx;
	line-height: 70rpx;
}
</style>